<template>
  <div>
    <van-row @click="isShowModel">
      <van-col span="6">
        <img :src="imgSrc" alt />
      </van-col>
      <van-col span="10">{{nickName}}</van-col>
      <van-col span="8">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <!-- 宫格区域 -->
    <van-grid :column-num="3" square clickable>
      <van-grid-item v-for="i in gridList" :key="i.id" :icon="i.icon" :text="i.text" />
    </van-grid>
    <!-- 弹框 -->
    <van-overlay :show="modelShow" @click="modelShowFalse"></van-overlay>
    <div class="showCenter">
      <van-form v-if="modelShow" @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="pwd"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Login } from '../api/login.js'
export default {
  data () {
    return {
      imgSrc: require('../assets/images/avatar.png'),
      modelShow: false,
      username: '',
      pwd: '',
      // 昵称
      nickName: '点击登录',
      // 宫格数组
      gridList: [
        {
          text: '我的订单',
          icon: 'label-o',
          id: 0
        },
        {
          text: '优惠券',
          icon: 'bill-o',
          id: 1
        },
        {
          text: '礼品卡',
          icon: 'point-gift-o',
          id: 2
        },
        {
          text: '我的收藏',
          icon: 'location-o',
          id: 3
        },
        {
          text: '我的足迹',
          icon: 'flag-o',
          id: 4
        },
        {
          text: '会员福利',
          icon: 'vip-card-o',
          id: 5
        },
        {
          text: '地址管理',
          icon: 'aim',
          id: 6
        },
        {
          text: '账号安全',
          icon: 'warn-o',
          id: 7
        },
        {
          text: '联系客服',
          icon: 'service-o',
          id: 8
        },
        {
          text: '帮助中心',
          icon: 'question-o',
          id: 9
        },
        {
          text: '意见反馈',
          icon: 'smile-comment-o',
          id: 10
        }
      ]
    }
  },
  methods: {
    // 打开模态框
    isShowModel () {
      const token = localStorage.getItem('yanxuanToken')
      if (!token) {
        this.modelShow = true
      }
      return false
    },
    // 点击遮罩事件
    modelShowFalse () {
      this.modelShow = false
      this.username = ''
      this.pwd = ''
    },
    async onSubmit (values) {
      this.username = values['用户名']
      this.pwd = values['密码']
      const res = await Login({
        username: this.username,
        pwd: this.pwd
      })
      if (res.errno !== 0) {
        this.$toast.fail(res.errmsg)
        this.modelShow = false
      } else {
        const { token, userInfo } = res.data
        localStorage.setItem('yanxuanToken', token)
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
        this.imgSrc = userInfo.avatar
        this.nickName = userInfo.username
        this.$toast.success('恭喜你登录成功')
        this.modelShow = false
        this.username = ''
        this.pwd = ''
      }
    }
  },
  created () {
    const token = localStorage.getItem('yanxuanToken')
    if (token) {
      const userInfo = localStorage.getItem('userInfo')
      const newUserInfo = JSON.parse(userInfo)
      // 如果存在token
      this.nickName = newUserInfo.username
      this.imgSrc = newUserInfo.avatar
    }
  }
}
</script>

<style lang="less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background-color: #333;
  color: #fff;
  .van-col {
    line-height: 0.8rem;
    font-size: 0.15rem;
    &:last-child {
      text-align: right;
    }
  }
  img {
    width: 0.8rem;
    display: block;
    border-radius: 50%;
  }
}
.showCenter {
  background-color: #fff;
  width: 90%;
  margin-top: 50%;
  margin-left: 50%;
  left: -45%;
  position: absolute;
  z-index: 99999;
}
.van-form {
  width: 90%;
  padding: 0.1rem;
}
</style>
